<template>
  <info-page-container @goListPage="cancel">
    <div class="info-data-container full-container flex-column">
      <div class="farmer-container flex-column">
        <div class="farmer-info-container">
          <chit-info :chit-info="dataItem"></chit-info>
        </div>
      </div>

      <div class="list-container">
        <layout-container title="农户列表">
          <template slot="title">
            <div class="flex-row">
              <div class="important-txt">
                受灾面积：{{ dataItem.sumArea }} 亩
              </div>
              <div class="important-txt" style="margin-left: 20px">
                理论赔付额：{{ dataItem.sumMoney }} 元
              </div>
            </div>
          </template>
          <template>
            <el-scrollbar >
              <el-collapse>
                <el-collapse-item v-for="(item,index) in dataItem.archives">
                  <template slot="title">
                    <farmer-info :farmer-info="item"></farmer-info>
                  </template>
                  <el-table
                    class="diy-table"
                    ref="plotTable"
                    :data="item.plots"
                    style="width: 100%;" height="100%">
                    <el-table-column
                      prop="plotNo"
                      label="编号">
                    </el-table-column>
                    <el-table-column
                      prop="plotArea"
                      label="面积（亩）">
                    </el-table-column>
                    <el-table-column
                      prop="sumArea"
                      label="受灾面积（亩）">
                      <template slot-scope="scope">
                    <span class="important-txt">
                    {{ scope.row.sumArea }}
                    </span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="money"
                      label="赔付额（元）">
                      <template slot-scope="scope">
                    <span class="important-txt">
                    {{ scope.row.money}}
                    </span>
                      </template>
                    </el-table-column>

                    <el-table-column width="150" label="操作" align="center">
                      <template slot-scope="scope">
                        <el-button
                          size="mini"
                          type="text"
                          icon="el-icon-edit"
                          @click="locationByData(disasterChitLayerId,scope.row,'地块信息')"
                        >定位
                        </el-button>
                      </template>
                    </el-table-column>

                  </el-table>
                </el-collapse-item>
              </el-collapse>
            </el-scrollbar>
          </template>
        </layout-container>
      </div>

    </div>
  </info-page-container>
</template>

<script>
import {infoPageMixins} from "@/views/business/mixins/infoPageMixins";
import {pageBaseMapMixins} from "@/views/business/mixins/pageBaseMapMixins";
import {GEOMETRY_TYPE, HANDLE_TYPE, REFRESH_PAGE_TYPE,} from "@/views/business/constantData";
import ListPageContainer from "@/components/ListPageContainer/index.vue";
import ChitInfo from "@/views/business/components/ChitInfo/index.vue";
import farmerInfo from "@/views/business/components/FarmerInfo/index.vue";
export default {
  mixins: [infoPageMixins, pageBaseMapMixins],
  components: {
    ListPageContainer,
    ChitInfo,
    farmerInfo
  },
  data() {
    return {
      HANDLE_TYPE,
      disasterChitLayerId: 'disasterChitLayer',
    }
  },
  methods: {
    cancel() {
      this.removeRender()
      this.goListPage(REFRESH_PAGE_TYPE.NO_REFRESH)
    },
    locationByData(layerId, row, popupTitle) {
      let {uid} = row
      const where = `uid = '${uid}'`
      this.locationByWhere({layerId, where, openPopupFlag: true, popupTitle})
    },
  },
  created(){
    this.dataItem = _.cloneDeep(this.currentItem)
  }
};
</script>

<style scoped lang="scss">
.info-data-container {
  .farmer-container {
    height: 12%;
    max-height: 12%;

    .farmer-info-container {
      width: 100%;
      height: 100%;
    }
  }

  .list-container {
    height: 85% !important;

    ::v-deep .el-collapse-item{
      .el-collapse-item__header{
        height: 250px;
      }
    }
  }

}
</style>
